'use client'

import React from 'react'
import { Spin, Typography } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'

const { Text } = Typography

interface LoadingSpinnerProps {
    size?: 'small' | 'default' | 'large'
    tip?: string
    spinning?: boolean
    children?: React.ReactNode
    className?: string
    overlay?: boolean
}

// 自定义加载图标
const CustomLoadingIcon = ({ size = 'default' }: { size?: 'small' | 'default' | 'large' }) => {
    const sizeMap = {
        small: 16,
        default: 24,
        large: 32,
    }

    return (
        <LoadingOutlined
            style={{
                fontSize: sizeMap[size],
                color: 'var(--primary-500)',
            }}
            spin
        />
    )
}

// 医学影像专用加载动画
const MedicalLoadingIcon = ({ size = 'default' }: { size?: 'small' | 'default' | 'large' }) => {
    const sizeMap = {
        small: 20,
        default: 32,
        large: 48,
    }

    const iconSize = sizeMap[size]

    return (
        <div
            className="medical-loading-icon"
            style={{
                width: iconSize,
                height: iconSize,
                position: 'relative',
            }}
        >
            {/* 外圈 */}
            <div
                className="absolute inset-0 border-2 border-gray-200 rounded-full"
                style={{
                    borderTopColor: 'var(--primary-500)',
                    animation: 'spin 1s linear infinite',
                }}
            />
            {/* 内圈 */}
            <div
                className="absolute inset-1 border-2 border-gray-100 rounded-full"
                style={{
                    borderBottomColor: 'var(--primary-300)',
                    animation: 'spin 1.5s linear infinite reverse',
                }}
            />
            {/* 中心点 */}
            <div
                className="absolute top-1/2 left-1/2 w-1 h-1 bg-primary-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"
                style={{
                    backgroundColor: 'var(--primary-500)',
                    animation: 'pulse 2s ease-in-out infinite',
                }}
            />
        </div>
    )
}

// 骨架屏加载组件
export const SkeletonLoader: React.FC<{
    rows?: number
    avatar?: boolean
    title?: boolean
    className?: string
}> = ({ rows = 3, avatar = false, title = true, className = '' }) => {
    return (
        <div className={`animate-pulse ${className}`}>
            <div className="flex items-start space-x-4">
                {avatar && (
                    <div className="w-12 h-12 bg-gray-200 rounded-full skeleton"></div>
                )}
                <div className="flex-1 space-y-3">
                    {title && (
                        <div className="h-4 bg-gray-200 rounded skeleton w-3/4"></div>
                    )}
                    {Array.from({ length: rows }).map((_, index) => (
                        <div
                            key={index}
                            className={`h-3 bg-gray-200 rounded skeleton ${index === rows - 1 ? 'w-2/3' : 'w-full'
                                }`}
                        />
                    ))}
                </div>
            </div>
        </div>
    )
}

// 影像加载专用组件
export const ImageLoadingPlaceholder: React.FC<{
    width?: number | string
    height?: number | string
    title?: string
}> = ({ width = '100%', height = 300, title = '加载影像数据中...' }) => {
    return (
        <div
            className="flex flex-col items-center justify-center bg-gray-50 border-2 border-dashed border-gray-200 rounded-lg"
            style={{ width, height }}
        >
            <MedicalLoadingIcon size="large" />
            <Text type="secondary" className="mt-4 text-sm">
                {title}
            </Text>
            <div className="mt-2 flex space-x-1">
                <div className="w-2 h-2 bg-primary-400 rounded-full animate-bounce"></div>
                <div className="w-2 h-2 bg-primary-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
                <div className="w-2 h-2 bg-primary-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
            </div>
        </div>
    )
}

// 主要的LoadingSpinner组件
export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
    size = 'default',
    tip,
    spinning = true,
    children,
    className = '',
    overlay = false,
}) => {
    if (!spinning && children) {
        return <>{children}</>
    }

    const loadingContent = (
        <div className={`flex flex-col items-center justify-center ${className}`}>
            <MedicalLoadingIcon size={size} />
            {tip && (
                <Text type="secondary" className="mt-3 text-sm">
                    {tip}
                </Text>
            )}
        </div>
    )

    if (overlay && children) {
        return (
            <div className="relative">
                {children}
                {spinning && (
                    <div className="absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center z-10 rounded-lg">
                        {loadingContent}
                    </div>
                )}
            </div>
        )
    }

    if (children) {
        return (
            <Spin
                spinning={spinning}
                indicator={<CustomLoadingIcon size={size} />}
                tip={tip}
                size={size}
            >
                {children}
            </Spin>
        )
    }

    return loadingContent
}

// 全屏加载组件
export const FullScreenLoading: React.FC<{
    tip?: string
    visible?: boolean
}> = ({ tip = '加载中...', visible = true }) => {
    if (!visible) return null

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in">
            <div className="bg-white rounded-lg p-8 shadow-xl max-w-sm w-full mx-4">
                <div className="text-center">
                    <MedicalLoadingIcon size="large" />
                    <Text className="mt-4 block text-base font-medium">
                        {tip}
                    </Text>
                    <div className="mt-4 w-full bg-gray-200 rounded-full h-1">
                        <div
                            className="bg-primary-500 h-1 rounded-full progress-bar"
                            style={{ width: '100%' }}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default LoadingSpinner